<template>
  <view class="container" ref="refContainer">
    <Header
      style="position: fixed; top: 0; z-index: 999"
      v-if="currentPage === 0 || currentPage === 1"
      :title="title"
      :icon="icon"
    >
    </Header>
    <component class="comp" :is="tabbarList[currentPage]"></component>
    <u-back-top :scroll-top="scrollTop" :top="400"></u-back-top>
    <CustTabbar @changeTab="changeTab"></CustTabbar>
  </view>
</template>

<script>
import Header from "../../components/header.vue";
import Home from "../../components/index.vue";
import Mine from "../../components/mine.vue";
import Car from "../../components/car.vue";
import Newpro from "../../components/newpro.vue";
import Evaluate from "../../components/evaluate.vue";
import { ref, shallowRef } from "vue";
import CustTabbar from "../../components/tabbar.vue";
export default {
  components: {
    CustTabbar,
    Home,
    Mine,
    Car,
    Newpro,
    Evaluate,
    Header,
  },
  setup() {
    const tabbarList = shallowRef([Home, Evaluate, Car, Mine]);
    const currentPage = ref(0);
    const scrollTop = ref(0);
    const refContainer = ref(null);
    return {
      tabbarList,
      currentPage,
      scrollTop,
      refContainer,
      title: "首页",
      icon: "home",
    };
  },
  onPageScroll({ scrollTop }) {
    this.scrollTop = scrollTop;
  },
  mounted() {
    
  },
  methods: {
    changeTab(index) {
      if (index === 0) {
        this.title = "首页";
        this.icon = "home";
      } else if (index === 1) {
        this.title = "论坛";
        this.icon = "chat";
      }
      this.currentPage = index;
    },
  },
};
</script>


<style scoped lang="scss">
.comp {
  margin-bottom: 50px;
  margin-top: 290rpx;
}
</style>
